<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress{width: 300px;height: 30px;border: 1px black solid;margin: 100px;
            background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%);
            background-size: 30px;animation: move infinite 5s linear;
        }
        @keyframes move{
            0%{background-position: 0 0;}
            100%{background-position: 300px 0;}
        }
        .sun{width: 400px;height: 350px;overflow: hidden;}
        .s{width: 20px;height: 500px;background-image: linear-gradient(to left,rgb(216, 216, 216) 1%,white 30%,white 60%,rgb(216, 216, 216) 99%);
            transform:translate(-100px,-600px) rotate(45deg) ;
        }
        .sun:hover .s{animation: name 2s;}
        @keyframes name{
            0%{transform: translate(-100px,-600px) rotate(45deg) ;}
            50%{transform: translate(500px,-300px) rotate(45deg) ;}
            100%{transform: translate(-100px,-600px) rotate(45deg) ;}
        }
    </style>
</head>
<body>
    <div class="progress"></div>
    <div class="sun"><img src="./img/3.jpg" alt=""><div class="s"></div></div>
</body>
</html>